<template>
  <div>
    <div class="detail"id="detai":style="over">
      <div :style="bodd">
        <div class="common-form">
          <!-- 轮播 -->
          <div class="detail-banner"style="overflow:hidden;height: 353px;position:relative;"@click="zhezhao">
            <div style="width: 300px;height: 30px;position:absolute;top: 10px;left: 5%;z-index:99;display: flex;overflow: hidden;display: none;"v-show="suspension4 != ''"class="mmm">
              <div style="width: 30px;height: 30px;background-color: #00f7de;border-radius: 50%;overflow: hidden;">
                <img :src="suspension4.u_headimgurl" alt=""width="100%"height="100%">
              </div>
              <span style="line-height: 30px;text-indent: 12px;">{{suspension4.message}}</span>
            </div>
            <div class="swiper-container"style="height: 100%;">
              <div class="swiper-wrapper">
                <div class="swiper-slide"v-for="(item,index) in img_url"@click="pic(index)"style="position: relative;">
                  <img :src="imgTitl+item.img"width=""height=""style="position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);">
                </div>
              </div>
              <!-- Add Pagination -->
              <div class="swiper-pagination"></div>
            </div>
          </div>
          <div style="margin-left: 10px;text-indent: 10px;margin-top: 10px; text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;width: 94%;">{{info.goods_title}}</div>
          <div class="group-detail-btn">
            <a href="#">拼团抽奖</a>
            <em>{{info.gti_team_people_num}}人拼</em>
          </div>
          <div class="detail-tel"style="display: none;">
            <p>{{info.goods_title}}</p>
            <span><i></i>关注</span>
          </div>
          <div class="detail-price">
            <!--<p style="font-weight: bold;color: red;"v-show="isVip == true">会员价：￥<span>{{info.price}}</span></p>-->
            <p style="font-weight: bold;color: red;">团购价：￥<span>{{info.gti_price}}</span></p>
            <p style="font-weight: bold;color: red;"v-show="isVip == false">零售价：￥<span>{{info.market_price}}</span></p>
            <p style="color: silver;font-weight: 300;"v-show="isVip == true">零售价：￥<del style="font-size: 12px;color: silver;">{{info.market_price}}</del></p>
          </div>
          <div class="detail-other">
            <em>邮费：0.00</em>
            <em>销量：{{info.has_sold}}</em>
            <em>库存：{{info.inventory}}</em>
          </div>
        </div>
        <!-- 充值 -->
        <div class="common-form"@click="vip">
          <a class="detail-recharge">
            <em>充值</em> 充值会员  尊享3大权益<i></i>
          </a>
        </div>
        <!-- 服务 -->
        <div class="common-form">
          <div class="detail-service">
            <span><em></em>服务</span> 100%正品·品牌授权·48小时发货
          </div>
        </div>
        <!-- 拼团玩法 -->
        <div class="common-form"@click="plv">
          <div class="group-detail-play">
            <div class="group-detail-play-tel">
              <em></em>
              <span>拼奖玩法 <i></i></span>
            </div>

            <div class="group-detail-schedule">
              <div class="group-detail-schedule-25">
                <div class="loading">
                  <div class="loading-left"></div>
                  <div class="loading-right"></div>
                  <div class="progress"></div>
                </div>
                <p>开团/参团</p>
              </div>
              <div class="group-detail-schedule-50">
                <div class="loading">
                  <div class="loading-left2"></div>
                  <div class="loading-right2"></div>
                  <div class="progress"></div>
                </div>
                <p>邀请好友</p>
              </div>
              <div class="group-detail-schedule-75">
                <div class="loading">
                  <div class="loading-left3"></div>
                  <div class="loading-right3"></div>
                  <div class="progress"></div>
                </div>
                <p>拼团成功</p>
              </div>
              <div class="group-detail-schedule-100">
                <div class="loading">
                  <div class="loading-left4"></div>
                  <div class="loading-right4"></div>
                  <div class="progress"></div>
                </div>
                <p>等待抽奖</p>
              </div>
            </div>
          </div>
        </div>
        <!-- 正在拼团 -->
        <div class="common-form">
          <div class="group-detail-spell-tel">
            正在拼团<i></i>
            <!--&gt;-->
          </div>
          <div class="group-detail-spell"style="max-height: 90px;overflow: auto;">
            <div>
              <div v-for="(item,index) in suspension">
                <div class="group-detail-spell-shop"style="overflow: hidden;">
                  <img :src="item.avatar" alt="" />
                  <!--<span>{{item.u_nickname}}</span>-->
                  <!--<span>还差<em>1人</em>成团</span>-->
                  <div style="width: 62px;height: 30px;line-height: 30px;border-radius: 20px;background-color: rgba(254, 39, 70, 1);text-align: center;color: #FFF;font-size: 12px;float: right;margin-top: 10px;"@click="qct(index)">去参团</div>
                  <span style=""class="anctt">{{item.message}}</span>
                </div>
              </div>
            </div>
          </div>

        </div>
        <!-- 公共标题 -->
        <div class="common-tel"style="display: none;">
          用户评价
          <div class="common-tel-dot">
            <em></em>
            <em></em>
            <em></em>
          </div>
          <a href="#">查看全部评价<i>&gt;</i></a>
        </div>
        <!-- 评价 -->
        <!--<div class="common-form">-->
        <!--<div class="detail-evaluate">-->
        <!--<div class="detail-evaluate-img">-->
        <!--<img src="../../assets/1.jpg"/>-->
        <!--</div>-->
        <!--<div class="detail-evaluate-text">-->
        <!--<p>小丸子</p>-->
        <!--<p>北欧风格的餐具真的很棒、样式也很精致！敲喜欢的！很适合整个餐桌的风格</p>-->
        <!--</div>-->
        <!--</div>-->
        <!--<div class="detail-evaluate">-->
        <!--<div class="detail-evaluate-img">-->
        <!--<img src="../../assets/2.jpg"/>-->
        <!--</div>-->
        <!--<div class="detail-evaluate-text">-->
        <!--<p>小丸子</p>-->
        <!--<p>北欧风格的餐具真的很棒、样式也很精致！敲喜欢的！很适合整个餐桌的风格</p>-->
        <!--</div>-->
        <!--</div>-->
        <!--</div>-->
        <!-- 店铺 -->
        <div class="common-form"style="display: none;">
          <div class="detail-shop">
            <div class="detail-shop-img"><img src="../../assets/1.jpg"/></div>
            <div class="detail-shop-text">
              <!--<div class="detail-shop-text-tel">拾味居<a href="查看店铺.html">进店逛逛</a></div>-->
              <div class="detail-shop-text-other">
                <!--<span>商品描述  <em>4.98</em></span>-->
                <!--<span>卖家服务  <em>4.98</em></span>-->
                <!--<span>物流服务  <em>4.98</em></span>-->
              </div>
            </div>
          </div>
        </div>
        <!-- 公共标题 -->
        <div class="common-tel">
          商品详情
          <div class="common-tel-dot">
            <em></em>
            <em></em>
            <em></em>
          </div>
        </div>
        <!-- 商品简介 -->
        <div class="common-form">
          <div class="detail-info">
            <div v-html="info.content"></div>
            <!--<img src="../../assets/detail_1.jpg" >-->
            <!--<img src="../../assets/detail-2.jpg" >-->
            <!--<img src="../../assets/detail-3.jpg" >-->
            <!--<img src="../../assets/detail-4.jpg" >-->
          </div>
        </div>
        <div class="footer-100"></div>
        <!-- 详情底部 -->
        <div class="team-footer"style="width: 100%;position: fixed;bottom: 0;">
          <a href="javascript:void(0);"style=""@click="home"><i></i><p>首页</p></a>
          <a href="javascript:void(0);"@click="kefu"><i></i><p>客服</p></a>
          <a href="#" @click="open2"style="display: none;">
            <em>￥{{isVip == true?info.price:info.market_price}}</em>
            <p>原价购买</p>
          </a>
          <div @click="open"style="width: 60%;background-color: #FE2746;float: right;">
            <!--<em>￥{{info.gti_price}}</em>-->
            <p style="text-align: center;line-height: 50px;color: white;">拼团抽奖</p>
          </div>>
        </div>
        <!-- 选择规格 -->
        <div class="black"></div>
        <div style="width: 100%;height: 455px;background-color: whitesmoke;position: fixed;bottom: 0;z-index: 10;"v-show="plec">
          <p style="margin-top: 10px;margin-left: 23px;margin-bottom: 10px;font-size: 14px;color: palevioletred;">
            <span>.</span>
            <span>拼奖玩法介绍</span>
            <span style="float: right;margin-right: 23px;"@click="xhao">X</span>
          </p>
          <div style="width: 90%;height: 1px;background-color: silver;margin: 0 auto;"></div>
          <p style="margin-left: 23px;margin-right: 23px;margin-top: 10px;font-size: 12px;line-height: 20px;">
            1、本公司承诺所有拼团商品均为正品；
          </p>
          <p style="margin-left: 23px;margin-right: 23px;font-size: 12px;line-height: 20px;">
            2、商品价格为出厂价，本公司用于推广宣传，不计成本，物美价廉；
          </p>
          <p style="margin-left: 23px;margin-right: 23px;font-size: 12px;line-height: 20px;">
            3、开团：选择心仪商品，点击“一键开团”按钮，付款后即视为开团成功；
          </p>
          <p style="margin-left: 23px;margin-right: 23px;font-size: 12px;line-height: 20px;">
            4、参团：进入好友分享的页面，点击“立即参团”按钮，付款后即为参团成功，若多人同时支付，支付成功的时间较早的人获得参团资格；
          </p>
          <p style="margin-left: 23px;margin-right: 23px;font-size: 12px;line-height: 20px;">
            5、成团：在开团或参团成功后，点击“邀根据提示分享页面链接给好友”将页面分享给好友，在有效的时间内凑齐人数即为成团。
          </p>
          <p style="margin-left: 23px;margin-right: 23px;font-size: 12px;line-height: 20px;">
            6、组团失败：在有效时间内未凑齐人数，即为组团失败，此时，将发起退款，款项将原路返回。
          </p>
          <p style="margin-left: 23px;margin-right: 23px;font-size: 12px;line-height: 20px;">
            7、活动结束后将从拼单成功的订单中随机抽取中奖者；
          </p>
          <p style="margin-left: 23px;margin-right: 23px;font-size: 12px;line-height: 20px;">
            8、中奖商品于拼团结束后发放；
          </p>
          <p style="margin-left: 23px;margin-right: 23px;">
            9、组团有效期间内，拼团商品订单不允许取消；
          </p>
          <p style="margin-left: 23px;margin-right: 23px;">
            10、商品售完时，未能拼团者视为购买失败，将发起退款，款项将原路返回。
          </p>
        </div>
        <div class="move"style="width: 100%;height: 35vh;position: fixed;top: 0;z-index: 9;display: none;"@click="mm">
          <div style="position: relative;">
            <div v-for="(item,index) in suspension" :style="action"@click.stop="mov(index)"v-if="mo">
              <div style="width: 35px;height: 35px;background-color: #00F7DE;float: left;border-radius: 50%;overflow: hidden;position: relative;z-index: 10;">
                <img :src="item.avatar" alt=""width="100%"height="100%">
              </div>
              <div style="float: left;display: flex;">
                <p :style="cod">{{item.u_nickname}}</p>
                <!--<p style="line-height: 35px;color: white;text-indent: 12px;">{{item.message}}</p>-->
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="footer-standard"v-show="guige">
        <div class="footer-standard-shop"@click="pos">
          <img :src="imgTitl+thumb2" alt=""/>
          <div>
            <!--<p>￥<em>{{spec.team_price}}</em></p>-->
            <!--<p>￥<em>{{type == 1?spec.team_price:pri}}</em></p>-->
            <p v-show="isVip == false">￥<em>{{type == 1?pri2:pri}}</em></p>
            <p v-show="isVip == true">￥<em>{{type == 1?pri2:pri3}}</em></p>
            <p><em>选择</em>：{{spec2 == ''?'分类':spec2}}&nbsp;{{mas}}件</p>
          </div>
        </div>
        <div class="footer-standard-num">
          <p style="">规格</p>
          <div>&nbsp;</div>
          <div style="display: flex;flex-wrap: wrap;">
            <!--<em class="footer-standard-num-pink">白色</em>-->
            <div v-for="(item,index) in attr"class=""@click="clic(index)">
              <!--<em :style="styleObject" v-bind:class="{ active: isActive }">{{item.spec_1}}</em>-->
              <em  v-bind:class="{ active: isActive === index }">{{item.spec_2}}</em>
            </div>
          </div>
        </div>
        <div class="footer-standard-num">
          <p>数量</p>
          <div class="goods-num">
            <span class="sub"@click="sub">-</span>
            <span class="num"><input type="text" v-model="mas"/></span>
            <span class="add"@click="add">+</span>
          </div>
        </div>
        <button class="detail-btn"@click="sure">确定</button>
      </div>
      <div style="width: 100%;height: 100%;background-color: #0C0C0C;position: fixed;top: 0;z-index:100;"v-show="pic2"@click.stop="pic4">
        <div style="width: 100%;height: 50%;margin-top: 40%;position: relative;overflow: hidden;">
          <!-- Swiper -->
          <div class="swiper-container2"style="height: 100%;">
            <div class="swiper-wrapper"style="height: 100%;">
              <div class="swiper-slide"style="width: 100%;height: 100%;"v-for="(item,index) in img_url">
                <img :src="imgTitl+item.img" alt=""width="100%"height="100%">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="width: 100%;height: 100%;background-color: #0C0C0C;position: fixed;top: 0;z-index:100;"v-show="pic6"@click.stop="pic5">
        <div style="width: 100%;height: 50%;margin-top: 40%;position: relative;overflow: hidden;">
          <img :src="imgTitl+thumb2" alt=""width="100%"height="100%">
        </div>
      </div>
    </div>

    <div data-v-55c6b9e9="" class="rule" style="position: fixed;top: 100px;z-index: 999;"v-show="keh"><p data-v-55c6b9e9="" class="ruleTel">客服电话</p> <div data-v-55c6b9e9=""><p data-v-55c6b9e9="" class="ruleText">18526793565</p> <div data-v-55c6b9e9="" class="ruleBtn"></div></div> <i data-v-55c6b9e9=""@click="ke">×</i></div>
    <div style="width: 100%;height: 100vh;background-color: rgba(0, 0, 0, 0.5);position: fixed;z-index: 9;top: 0;height: 100%;"v-show="z"@click="g"></div>
  </div>
</template>

<script>
  import axios from 'axios'
  import qs from 'qs'
  import Swiper from 'swiper'
  import '../../../node_modules/swiper/dist/js/swiper.min'
  import element from 'element-ui'
  import { Loading } from 'element-ui';

  export default {
    name: 'Details',
    data () {
      return {
        imgTitl: 'http://39.96.76.3/HuiWanZhong/public/uploads/',
        isActive: -1,
        id: this.$route.params.id,
        info: [],
        attr: [],
        guige: false,
        styleObject: {
          'background-color': '',
          color: ''
        },
        mas: '1',
        plec: false,
        img_url: [],
        img_url2: [],

        goods_id2: '',
        id2: '',
        pri: '',
        //拼团
        pri2: '',
        //原价
        pri3:'',
        thumb2: '',
        spec2: '',

        List: [],
        spec: [],
        List2: [],
        type: '',
        cod:{
          color:'#3f51b5',
          'text-indent': '12px',
          'line-height': '35px',
          'position': 'relative',
          'z-index': '999',
        },
        action:{
          'width': '85%',
          'height': '35px',
          'background-color': 'black',
          'border-radius': '15px',
          'opacity': '0.3',
          'position': 'absolute',
          left: '10%',
          top: '10px',
        },
        over:{
          'overflow': '',
          'height':''
        },
        bodd:{
          overflow:'',
          height:'',
          background:'',
          zIndex:'',
          opacity:''
        },
        isVip:'',
        suspension:[],
        suspension2:[],
        suspension3:[],
        suspension4:'',
        mo:true,
        Mera:[],
        options:'',
        loadingInstance:'',
        pic2:false,
        pic3:[],
        pic6:false,
        ii:'',
        keh:false,
        z:false,
      }
    },
    created () {
      this.over.overflow = 'hidden';
      this.over.height = '100vh';
      setTimeout(()=>{
        this.over.overflow = '';
        this.over.height = '';
      },100)
      this.code();
      this.loadingInstance = Loading.service(this.options);
      let img_url = [];
      axios.get('http://39.96.76.3/HuiWanZhong/public/index.php/team/index/getTeamGoodDetail', {
        params: {
          'uId': localStorage.getItem('openid'),
          'goodId': this.id,
        },
      }).then(response => {
        if (response.data.message == '库存不足' || response.data.message == '请先登录'){
          this.$message(response.data.message);
          this.$router.push({name:'assemble'});
        }else if (response.data.status == false){
          this.$notify({
            // title: '警告',
            message: response.data.message,
            type: 'warning'
          });
          this.$router.push({name:'assemble'});
        } else {
          this.info = response.data.data.info;
          this.attr = response.data.data.attr;
          this.pri = this.info.market_price;
          img_url = JSON.parse(this.info.img_url);
          this.img_url = img_url;
          this.img_url2 = img_url;
          this.thumb2 = this.info.thumbnail;
          this.isVip = response.data.data.isVip;
          this.pri3 = this.info.price;
          this.Barrage();
          this.loadingInstance.close();
        }
      }).catch(function (error) {
        console(error);
      });

      this.random_number();
      this.random_let();
    },
    mounted () {
      var swiper = new Swiper('.swiper-container', {
        pagination : '.swiper-pagination',
        paginationClickable: true,
        observer:true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents:true,//修改swiper的父元素时，自动初始化swiper
      });
      window.addEventListener('scroll',function(){
        let top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset//要做兼容 在模拟器能正常获取scrolltop在微信h5页面和手机的浏览器页面一直为0
        if(top==0 || top<0){
        }else{
        }
      })
      element.scrollTop = 400;
      },
    watch:{
    },
    methods: {
      kefu(){
        // this.over.background = 'rgba(0, 0, 0, 0.5)';
        this.keh = true;
        this.z = true;
      },
      ke(){
        this.over.background = '';
        this.keh = false;
        this.z = false;
      },
      g(){
        this.z = false;
        this.keh = false;
        this.guige = false;
        this.plec = false;
        this.bodd.overflow = '';
        this.bodd.height = '';
      },
      home(){
        location.href = '/'
      },
      scro(){
        console.log(document.documentElement.scrollTop);
      },
      xhao(){
        this.plec = false;
        this.z = false;
        this.bodd.overflow = '';
        this.bodd.height = '';
      },
      onSearch () {
        this.loadingInstance = Loading.service(this.options);
      },
      open () {
        this.guige = true;
        this.type = '1';
        this.bodd.overflow = 'hidden';
        this.bodd.height = '100vh';

        // document.getElementById('detai').addEventListener('touchmove', function (event) {
        //   event.preventDefault();
        // });

        // this.bodd.background = '#000';
        // this.bodd.zIndex = '10';
        // this.bodd.opacity = '.5';
        this.z = true;
        if (this.type == 1) {
          this.pri2 = this.info.gti_price;
        } else {

        }
      },
      open2 () {
        this.guige = true;
        this.type = '0';
        this.bodd.overflow = 'hidden';
        this.bodd.height = '100vh';
        this.bodd.zIndex = '10';
        this.bodd.opacity = '.5';

        if (this.type == 0) {
          // this.spec.team_price = ;
          this.pri3 = this.info.market_price;
        } else {

        }
      },
      zhezhao () {
        this.guige = false;
        this.plec = false;
        this.isActive = '';
        this.spec = '';
        this.goods_id2 = '';
        this.id2 = '';
        this.spec2 = '';
        this.bodd.overflow = '';
        this.bodd.height = '';
        this.bodd.background = '';
        this.bodd.zIndex = '';
        this.bodd.opacity = '';
      },
      mm(){
        this.guige = false;
        this.plec = false;
        this.isActive = '';
        this.spec = '';
        this.goods_id2 = '';
        this.id2 = '';
        this.spec2 = '';
        this.bodd.overflow = '';
        this.bodd.height = '';
        this.bodd.background = '';
        this.bodd.zIndex = '';
        this.bodd.opacity = '';
      },
      mov(index){
        this.guige = false;
        this.plec = false;
        this.isActive = '';
        this.spec = '';
        this.goods_id2 = '';
        this.id2 = '';
        this.spec2 = '';
        this.bodd.overflow = '';
        this.bodd.height = '';
        this.bodd.background = '';
        this.bodd.zIndex = '';
        this.bodd.opacity = '';
        axios.get('http://39.96.76.3/HuiWanZhong/public/index.php/team/index/getTeamDetail', {
          params: {
            'uId':localStorage.getItem('openid'),
            'common_id':this.suspension[index].common_id
          },
        }).then(response =>{
          this.Mera = response.data.data;
          console.log(response);
          // 存储用户信息，
          sessionStorage.setItem("Mera", JSON.stringify(this.Mera));
          this.$router.push({name:'AssMeration'});
        }).catch(function (error) {
          console.log(error);
        });
      },
      clic (index) {
        // this.spec = this.attr[index];
        this.isActive = index;
        this.styleObject['background-color'] = 'rgba(254, 39, 70, 0.08)';
        this.styleObject.color = '#FE2746';
        this.goods_id2 = this.attr[index].goods_id;
        this.id2 = this.attr[index].id;
        this.pri3 = this.attr[index].vip_price;
        this.pri = this.attr[index].market_price;
        this.pri2 = this.attr[index].team_price;
        this.spec2 = this.attr[index].spec_2;
        this.thumb2 = this.attr[index].thumb
      },
      sub () {
        if (this.type == 0){
          if (this.mas > 1) {
            this.mas--;
          }
        }
      },
      add () {
        if (this.type == 0){
          this.mas++;
        }
      },
      plv () {
        this.plec = true;
        this.z = true;
        this.bodd.overflow = 'hidden';
        this.bodd.height = '100vh';
      },
      sure () {
        if (this.mas != '' && this.id2 != '' && this.goods_id2 != '' && this.type != '') {
          console.log("type:"+this.type);
          if (this.type == 0) {
            axios.post('http://39.96.76.3/HuiWanZhong/public/index.php/teamOrder/index/add_cart', qs.stringify({
              'uId': localStorage.getItem('openid'),
              'num': this.mas,
              'spec': this.id2,
              'common_id': '',
              'id': this.goods_id2,
              'type': this.type,
            })).then(re => {
              this.List2 = re.data.data;
              this.List2.spec_2 = this.spec2;
              this.List2.thumb = this.spec.thumb;
              this.List2.type = this.type;
              this.List2.pri = this.pri;
              this.List2.market_price2 = this.info.market_price;
              this.List2.thumb2 = this.thumb2;
              this.List2.mas = this.mas;
              // this.market_price =
              // 存储用户信息，
              sessionStorage.setItem('List', JSON.stringify(''));
              sessionStorage.setItem('List', JSON.stringify(this.List2));
              this.$router.push({name: 'AssembleOrder'});
            });
          } else if (this.type == 1) {
            axios.post('http://39.96.76.3/HuiWanZhong/public/index.php/teamOrder/index/add_cart', qs.stringify({
              'uId': localStorage.getItem('openid'),
              'num': this.mas,
              'spec': this.id2,
              'common_id': '',
              'id': this.goods_id2,
              'type': this.type,
            })).then(re => {
              console.log(re);
              this.List2 = re.data.data;
              this.List2.spec_2 = this.spec2;
              this.List2.thumb = this.spec.thumb;
              this.List2.type = this.type;
              this.List2.pri = this.pri2;
              this.List2.market_price2 = this.info.market_price;
              this.List2.thumb2 = this.thumb2;
              this.List2.mas = this.mas;
              // 存储用户信息，
              sessionStorage.setItem('List', JSON.stringify(''));
              sessionStorage.setItem('List', JSON.stringify(this.List2));
              this.$router.push({name: 'AssembleOrder'});
            });
          } else {

          }
        } else {
        }
      },

      code () {
        let r, g, b;
        r = Math.floor(Math.random() * 256);
        g = Math.floor(Math.random() * 256);
        b = Math.floor(Math.random() * 256);
        let color = '#'+ Math.random().toString(16).substr(-6);
        this.cod.color = color;
      },
      random_number(){
        let m = parseInt(Math.random() * 180) + 1;
        this.action.top = m+'px';
      },
      random_let(){
      },
      Barrage(){
        axios.get('http://39.96.76.3/HuiWanZhong/public/index.php/task/index/_order_notice', {
          params: {
            goodId:this.info.id,
          },
        }).then(response =>{
          console.log(response)
          if (response.data.data == ''){
            this.suspension = ''
          } else if (response.data.status == false){
            alert(response.data.message)
          } else if (response.data.data != '' && response.data.data.length >= 2) {
            this.suspension = response.data.data;
            this.suspension3 = response.data.data;
            setInterval(()=>{
              let a = this.suspension.length;
              let b = this.suspension.length-a;
              this.suspension2.push(this.suspension[b]);
              this.suspension.splice(b,1);
              this.suspension.push(this.suspension2[0]);
              this.suspension2.splice(0,1);
            },1500);
          }else if(response.data.data != '' && response.data.data.length < 2){
            this.suspension = response.data.data;
          }
        }).catch(function (error) {
          alert(error);
        });

      },
      qct(index){
        axios.get('http://39.96.76.3/HuiWanZhong/public/index.php/team/index/getTeamDetail', {
          params: {
            'uId':localStorage.getItem('openid'),
            'common_id':this.suspension[index].common_id
          },
        }).then(response =>{
          this.Mera = response.data.data;
          console.log(response);
          // 存储用户信息，
          sessionStorage.setItem("Mera", JSON.stringify(this.Mera));
          this.$router.push({name:'AssMeration'});
        }).catch(function (error) {
          console.log(error);
        });
      },
      ScollPostion(){
        console.log(document.documentElement.scrollTop);
      },
      pic(index){
        if (this.guige != true){
        this.pic2 = true;
        this.ii = index;
          var swiper2 = new Swiper('.swiper-container2', {
            pagination : '.swiper-pagination',
            paginationClickable: true,
            observer:true,//修改swiper自己或子元素时，自动初始化swiper
            observeParents:true,//修改swiper的父元素时，自动初始化swiper
            initialSlide:this.ii,
          });
        }else if (this.guige != false) {
          this.pic2 = false;
        }
      },
      pic4(){
        this.pic2 = false;
      },
      pic5(){
        this.pic6 = false;
      },
      pos(){
        this.pic6 = true;
      },
      vip(){
        this.$router.push({name:'openVip'});
      }
    },
    destroyed:function(){
      // this.loadingInstance.close();
    }
  }
</script>

<style scoped>
  *{
    margin:0px;
    padding:0px;
    font-family:"微软雅黑","Microsoft YaHei";
    font-size:14px;
    color:#101010;
  }
  body{
    width:100%;
    background:#f9f9f9;
  }
  em,i{
    font-style: normal;
  }
  .active1{

  }
  a{
    text-decoration: none;
  }
  input,textarea{
    outline: none;
  }
  .left{
    float:left;
  }
  .right{
    float:right;
  }
  .footer-100{
    width:100%;
    height:60px;
    display: inline-block;
  }
  /*底部菜单*/
  .footer a{
    width:20%;
    text-align: center;
    float: left;
  }
  .footer a p{
    font-size:13px;
  }
  .footer a:nth-child(1) i{
    display: inline-block;
    height: 22px;
    width: 20px;
    overflow: hidden;
    margin-top: 2px;
    background: url(../../assets//tab1-pink.png) no-repeat;
    background-size: 100%;
    margin-top: 5px;
    vertical-align: text-bottom;
  }
  .footer a:nth-child(2) i{
    display: inline-block;
    height: 22px;
    width: 18px;
    overflow: hidden;
    margin-top: 2px;
    background: url(../../assets//tab2.png) no-repeat;
    background-size: 100%;
    margin-top: 5px;
    vertical-align: text-bottom;
  }
  .footer a:nth-child(3) i{
    display: inline-block;
    height: 22px;
    width: 20px;
    overflow: hidden;
    margin-top: 2px;
    background: url(../../assets//tab3.png) no-repeat;
    background-size: 100%;
    margin-top: 5px;
    vertical-align: text-bottom;
  }
  .footer a:nth-child(4) i{
    display: inline-block;
    height: 22px;
    width: 20px;
    overflow: hidden;
    margin-top: 2px;
    background: url(../../assets//tab4.png) no-repeat;
    background-size: 100%;
    margin-top: 5px;
    vertical-align: text-bottom;
  }
  .footer a:nth-child(5) i{
    display: inline-block;
    height: 22px;
    width: 20px;
    overflow: hidden;
    margin-top: 2px;
    background: url(../../assets//tab5.png) no-repeat;
    background-size: 100%;
    margin-top: 5px;
    vertical-align: text-bottom;
  }
  /*商品数量*/
  .goods-num{
    margin-top: 15px;
    display: inline-block;
  }
  .add,.sub{
    font-size:20px;
    float: left;
    width:25px;
    height:25px;
    line-height: 25px;
    text-align: center;
  }
  .num{
    float: left;
  }
  .num input{
    width: 45px;
    height: 25px;
    line-height: 25px;
    border-radius: 20px;
    background-color: rgba(254, 39, 70, 0.08);
    border:0;
    text-align: center;
    color:#FC2847;
  }
  /*通屏按钮*/
  .btn-big{
    width:100%;
    height:49px;
    line-height: 49px;
    text-align: center;
    color:#FFF;
    background: #FE2746;
    position: fixed;
    bottom:0;
    left:0;
  }
  .btn-big em{
    font-size:20px;
    color:#FFF;
    vertical-align: bottom;
  }
  /*轮播*/
  .banner img{
    width:100%;
  }
  /*公共边框*/
  .common-form{
    width:94%;
    margin:0 auto;
    background: #FFF;
    border-radius: 5px;
    margin-top:10px;
    overflow: hidden;
  }
  /*公共标题*/
  .common-tel{
    width:94%;
    margin:0 auto;
    margin-top:15px;
    color:#FE2746;
    font-size:15px;
    font-weight: 600;
    display: inline-block;
    margin-left: 3%;
  }
  .common-tel-dot em:nth-child(1){
    width: 12px;
    height: 2px;
    background: #FE2746;
    float: left;
    margin-top: 5px;
  }
  .common-tel-dot em:nth-child(2){
    width: 8px;
    height: 2px;
    background-color: rgba(254, 39, 70, 0.59);
    float: left;
    margin-top: 5px;
    margin-left: 6px;
  }
  .common-tel-dot em:nth-child(3){
    width: 6px;
    height: 2px;
    background-color: rgba(254, 39, 70, 0.3);
    float: left;
    margin-top: 5px;
    margin-left: 6px;
  }
  .common-tel a{
    color: #FE2746;
    float: right;
    font-size: 12px;
    font-weight: 100;
    margin-top: -13px;
  }
  .common-tel a i{
    color:#FE2746;
  }










  /*详情页面*/
  .detail-banner img{
    width:100%;
    height:100%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }
  .detail-banner-dot{
    width:100%;
    display: inline-block;
    text-align: center;
  }
  .detail-banner-dot em{
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #CCC;
    display: inline-block;
    margin: 0 6px;
  }
  .detail-banner-dot-pink{
    background: #FE2746 !important;
  }
  .detail-tel,.detail-price,.detail-other{
    width:94%;
    margin:5px auto;
    line-height: 24px;
  }
  .detail-tel span{
    font-size: 12px;
    color: #999;
    float: right;
    margin-top: -17px;
  }
  .detail-tel span i{
    display: inline-block;
    height: 19px;
    width: 20px;
    overflow: hidden;
    margin-top: 2px;
    background: url(../../assets//xin.png) no-repeat;
    background-size: 100%;
    margin-top: 5px;
    vertical-align: text-bottom;
  }
  .detail-price p:nth-child(1){
    font-size:12px;
    color:#999;
  }
  .detail-price p:nth-child(2){
    color: #FE2746;
    font-weight: 600;
    font-size: 14px;
  }
  .detail-price p:nth-child(2) em{
    color:#FE2746;
    font-size:18px;
  }
  .detail-other{
    display: inline-block;
    margin-left: 3%;
    margin-bottom: 2%;
  }
  .detail-other em{
    width:33.33%;
    float:left;
    color:#999;
    font-size:12px;
  }
  .detail-other em:nth-child(1){
    text-align: left;
  }
  .detail-other em:nth-child(2){
    text-align: center;
  }
  .detail-other em:nth-child(3){
    text-align: right;
  }
  .detail-service{
    padding:9px 8px;
    font-size:12px;
    color:#999;
  }
  .detail-service span{
    color:#FE2746;
    font-weight: 600;
  }
  .detail-service span em{
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #FE2746;
    display: inline-block;
    margin: 2px 6px;
  }

  .detail-recharge em{
    background: #FE2746;
    color:#FFF;
    font-weight: 600;
    text-align: center;
    line-height: 36px;
    padding:9px 8px;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
  }
  .detail-recharge i{
    color:#FE2746;
    float: right;
    padding:8px;
    font-size:14px;
  }
  .detail-evaluate img{
    width:20px;
    height:20px;
    border-radius: 50%;
  }
  .detail-evaluate,.detail-shop{
    width: 94%;
    margin: 0 auto;
    display: inline-block;
    margin-left: 3%;
    padding-top: 3%;
  }
  .detail-evaluate-img{
    width:12%;
    float:left;
    text-align: center;
  }
  .detail-evaluate-text{
    width: 88%;
    float: left;
    padding-bottom: 3%;
    border-bottom: 1px solid #f2f2f2;
  }
  .detail-evaluate-text p:nth-child(1){
    color:#999;
    font-size:15px;
  }
  .detail-evaluate-text p:nth-child(2){
    font-size:12px;
    margin-top:8px;
  }
  .detail-shop{
    padding-bottom: 3%;
  }
  .detail-shop img{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-top: 7px;
  }
  .detail-shop-img{
    width:20%;
    float: left;
  }
  .detail-shop-text{
    width:80%;
    float: left;
  }
  .detail-shop-text-tel{
    font-size:16px;
  }
  .detail-shop-text-tel a{
    text-align: center;
    font-size: 12px;
    background: #FE2746;
    color: #FFF;
    border-radius: 20px;
    padding: 3px 9px;
    float: right;
  }
  .detail-shop-text-other{
    margin-top:10px;
  }
  .detail-shop-text-other span{
    color:#999;
    font-size:12px;
  }
  .detail-shop-text-other span:nth-child(2){
    margin:0 2%;
  }
  .detail-shop-text-other span em{
    color:#FE2746;
    font-size:12px;
  }
  .detail-info img{
    width:100%;
  }
  .detail-footer,.team-footer,.footer{
    position: fixed;
    bottom:0;
    left:0;
    height:48px;
    width:100%;
    background: #EBEBEB;
  }
  .detail-footer a:nth-child(1),.team-footer a:nth-child(1){
    width:20%;
    float: left;
    text-align: center;
  }
  .detail-footer a:nth-child(1) i,.team-footer a:nth-child(1) i{
    display: inline-block;
    height: 21px;
    width: 22px;
    overflow: hidden;
    margin-top: 2px;
    background: url(../../assets//index.png)  no-repeat;
    background-size:100%;
    margin-top:5px;
  }
  .detail-footer a:nth-child(2) i,.team-footer a:nth-child(2) i{
    display: inline-block;
    height: 21px;
    width: 22px;
    overflow: hidden;
    margin-top: 2px;
    background: url(../../assets//kefu.png)  no-repeat;
    background-size:100%;
    margin-top:5px;
  }
  .detail-footer a:nth-child(2),.team-footer a:nth-child(2){
    width:20%;
    float: left;
    text-align: center;
  }
  .detail-footer a:nth-child(3) i{
    display: inline-block;
    height: 21px;
    width: 22px;
    overflow: hidden;
    margin-top: 2px;
    background: url(../../assets//shop.png)  no-repeat;
    background-size:100%;
    margin-top:5px;
  }
  .detail-footer a:nth-child(3){
    width:20%;
    float: left;
    text-align: center;
  }
  .detail-footer a:nth-child(4){
    width:40%;
    float: left;
    background: #FE2746 ;
    color:#FFF;
    text-align: center;
    height: 48px;
    line-height: 48px;
    height:48px;
    color:#FFF;
  }

















  /*选择规格*/
  .black{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9;
    display: none;
  }
  .footer-standard{
    position: fixed;
    bottom:0;
    left:0;
    width:100%;
    background: #FFF;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    z-index: 10;
    overflow: hidden;
  }
  .footer-standard-shop{
    width:94%;
    margin:3% auto;
  }
  .footer-standard-shop img{
    width:92px;
    height:92px;
    border-radius: 5px;
    float: left;
  }
  .footer-standard-shop div{
    margin-left: 10px;
    display: inline-block;
    margin-top:15px;
  }
  .footer-standard-shop div p:nth-child(1){
    color:#FE2746;
    font-size:16px;
  }
  .footer-standard-shop div p:nth-child(1) em{
    color:#FE2746;
    font-size:18px;
  }
  .footer-standard-shop div p:nth-child(2) em{
    color:#999;
  }
  .footer-standard-shop div p:nth-child(2){
    font-size:12px;
  }
  .detail-btn{
    width:100%;
    color:#FFF;
    background:#FE2746;
    height:49px;
    text-align: center;
    border:0;
    margin-top: 40px
  }
  .footer-standard-num{
    margin-top:15px;
    width:94%;
    margin-left: 3%;
    display: inline-block;
  }
  .footer-standard-num p{
    font-size:16px;
  }
  .footer-standard-num div em{
    padding: 3px 10px;
    border-radius: 20px;
    background-color: rgba(123, 123, 123, 0.08);
    text-align: center;
    margin-top: 15px;
    display: inline-block;
    margin-left: 6px;
  }
  .footer-standard-num-pink{
    background-color: rgba(254, 39, 70, 0.08) !important;
    color:#FE2746;
  }
  /*拼团详情*/
  .team-footer a:nth-child(3),.team-footer a:nth-child(4){
    width:30%;
    height:49px;
    float:left;
    text-align: center;
    background-color: rgba(255, 139, 0, 1);
  }
  .team-footer a:nth-child(4){
    background: #FE2746;
  }
  .team-footer a:nth-child(3) p,.team-footer a:nth-child(4) p,.team-footer a:nth-child(3) em,.team-footer a:nth-child(4) em{
    color:#FFF;
  }
  .team-footer a:nth-child(3) em,.team-footer a:nth-child(4) em{
    margin-top: 5px;
    display: inline-block;
  }
  .group-detail-btn{
    width: 94%;
    margin:10px auto;
  }
  .group-detail-btn a{
    width: 77px;
    height: 24px;
    display: inline-block;
    line-height: 24px;
    border-radius: 5px;
    background-color: rgba(252, 40, 71, 1);
    text-align: center;
    color:#FFF;
    font-weight: 600;
    font-size:12px;
  }
  .group-detail-btn em{
    height: 24px;
    display: inline-block;
    color: #FE2746;
    font-size: 12px;
    line-height: 24px;
    border-radius: 5px;
    background-color: rgba(252, 40, 71, 0.07);
    text-align: center;
    margin-left: 10px;
    padding: 0 10px;
  }
  .group-detail-play-tel{
    height:38px;
    line-height: 38px;
    padding: 0 8px;
  }
  .group-detail-play-tel em {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #FE2746;
    display: inline-block;
    margin: 2px 6px;

  }
  .group-detail-play-tel span{
    font-weight: 600;
    color: #FE2746;
    width: 90%;
    border-bottom: 1px solid #f2f2f2;
    display: inline-block;
  }
  .group-detail-play-tel span i{
    font-weight: 100;
    color:#FE2746;
    float:right;
  }
  .group-detail-spell{
    padding-bottom: 10px;
  }
  .group-detail-spell-tel{
    padding: 9px 0;
    width: 94%;
    margin: 0 auto;
    border-bottom: 1px solid #f2f2f2;
  }
  .group-detail-spell-tel i{
    float: right;
  }
  .group-detail-schedule{
    margin-top:12px;
  }
  .group-detail-spell-shop{
    width:94%;
    margin:0 auto;
    height:50px;
    line-height: 50px;
  }
  .group-detail-spell-shop a{
    width: 62px;
    height: 30px;
    line-height: 30px;
    border-radius: 20px;
    background-color: rgba(254, 39, 70, 1);
    text-align: center;
    color: #FFF;
    font-size: 12px;
    float: right;
    margin-top:10px;
  }
  .group-detail-spell-shop img{
    width:30px;
    height:30px;
    float: left;
    border-radius: 50%;
    margin-top:10px;
  }
  .group-detail-spell-shop span:nth-child(2){
    font-size:12px;
    margin-left: 5px;
  }
  .group-detail-spell-shop span:nth-child(3){
    font-size:12px;
    color:#999;
    margin-left: 5px;
  }
  .group-detail-spell-shop span:nth-child(5){
    font-size:12px;
    float: right;
    margin-right: 10px;
  }
  .group-detail-spell-shop span:nth-child(5) em{
    font-size:12px;
    color:#FE2746;
  }
  .group-detail-schedule-50,.group-detail-schedule-25,.group-detail-schedule-75,.group-detail-schedule-100{
    width:25%;
    float:left;
    text-align: center;
    padding-bottom: 10px;
  }
  .group-detail-schedule-50 p,.group-detail-schedule-25 p,.group-detail-schedule-75 p,.group-detail-schedule-100 p{
    font-size:12px;
  }
  /*环形进度条*/
  .loading {
    width: 30px;
    height: 30px;
    position: relative;
    margin-left: 30%;
    padding-bottom: 10px;
  }
  .loading .progress {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    left:5px;
    top: 5px;
    text-align: center;
  }

  .loading-left,
  .loading-right {
    width: 15px;
    height: 30px;
    overflow: hidden;
    position: relative;
    float: left;
    background-color: #FE2746
  }
  .loading-left {
    border-radius: 112px 0 0 112px;
  }
  .loading-right {
    border-radius: 0 112px 112px 0;
  }
  .loading-left:after,
  .loading-right:after {
    content: "";
    position: absolute;
    display: block;
    width: 15px;
    height: 30px;
    background-color: #FFF;
  }
  .loading-right:after {
    content: "";
    position: absolute;
    display: block;
  }
  .loading-left:after {
    transform-origin: right center;
  }

  .loading-right:after {
    transform-origin: left center;
    transform: rotateZ(90deg);
  }
  /*第二个*/
  .loading-left2,
  .loading-right2 {
    width: 15px;
    height: 30px;
    overflow: hidden;
    position: relative;
    float: left;
    background-color: #FE2746
  }
  .loading-left2 {
    border-radius: 112px 0 0 112px;
  }
  .loading-right2 {
    border-radius: 0 112px 112px 0;
  }
  .loading-left2:after,
  .loading-right2:after {
    content: "";
    position: absolute;
    display: block;
    width: 15px;
    height: 30px;
    background-color: #FFF;
  }
  .loading-right2:after {
    content: "";
    position: absolute;
    display: block;
  }
  .loading-left2:after {
    transform-origin: right center;
  }

  .loading-right2:after {
    transform-origin: left center;
    transform: rotateZ(180deg);
  }


  /*第三个*/
  .loading-left3,
  .loading-right3 {
    width: 15px;
    height: 30px;
    overflow: hidden;
    position: relative;
    float: left;
    background-color: #FE2746
  }
  .loading-left3 {
    border-radius: 112px 0 0 112px;
  }
  .loading-right3 {
    border-radius: 0 112px 112px 0;
  }
  .loading-left3:after,
  .loading-right3:after {
    content: "";
    position: absolute;
    display: block;
    width: 15px;
    height: 30px;
    background-color: #FFF;
  }
  .loading-right3:after {
    content: "";
    position: absolute;
    display: block;
  }
  .loading-left3:after {
    transform-origin: right center;
    transform: rotateZ(90deg);
  }

  .loading-right3:after {
    transform-origin: left center;
    transform: rotateZ(180deg);
  }


  /*第四个*/
  .loading-left4,
  .loading-right4 {
    width: 15px;
    height: 30px;
    overflow: hidden;
    position: relative;
    float: left;
    background-color: #FE2746
  }
  .loading-left4 {
    border-radius: 112px 0 0 112px;
  }
  .loading-right4 {
    border-radius: 0 112px 112px 0;
  }
  .loading-left4:after,
  .loading-right4:after {
    content: "";
    position: absolute;
    display: block;
    width: 15px;
    height: 30px;
    background-color: #FFF;
  }
  .loading-right4:after {
    content: "";
    position: absolute;
    display: block;
  }
  .loading-left4:after {
    transform-origin: right center;
    transform: rotateZ(180deg);
  }
  .loading-right4:after {
    transform-origin: left center;
    transform: rotateZ(180deg);
  }
  .active{
    color: deeppink;
  }
  .anctt{
    /*animation: mymove 5s infinite;*/
  }
  @keyframes mymove
  {
    from {color: salmon;}
    to {color: rebeccapurple;}
  }
  .mmm{
    animation: mymovee 3s infinite;
  }
  @keyframes mymovee
  {
    from{top: 10px;}
    to{top:-30px;}
  }
  .el-message-box{
    width: 80%!important;
  }
  .rule[data-v-55c6b9e9] {
    position: fixed;
    width: 80%;
    top: 30%;
    left: 10%;
    background: #FFF;
    border-radius: 5px;
    overflow: hidden;
    z-index: 20;
    text-align: center;
  }
  .ruleTel[data-v-55c6b9e9] {
    font-size: 18px;
    font-weight: 600;
    margin-top: 15px;
  }
  .ruleText[data-v-55c6b9e9] {
    font-size: 13px;
    margin-top: 15px;
    width: 94%;
    margin-left: 3%;
    line-height: 24px;
    color: #999;
  }
  .ruleBtn[data-v-55c6b9e9] {
    margin-top: 15px;
  }
  .rule i[data-v-55c6b9e9] {
    color: #FFF;
    background: #BBB;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    text-align: center;
    font-size: 16px;
    position: absolute;
    top: 10px;
    right: 10px;
    line-height: 20px;
  }
</style>
